<template>
  <span v-if="user.isLogin">
    <!--已经登录-->
    &nbsp;&nbsp;
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar size="" shape="square" :src="circleUrl" />
      </span>
      <template #dropdown>
        <br>  
        &nbsp;&nbsp;欢迎 &nbsp; {{ user.name }} &nbsp; &nbsp; &nbsp; <br> <br> 
        <hr>
        <el-button type="" @click="userState.logout">退出</el-button>
        <br><br>
      </template>
    </el-dropdown>
  </span>
  <span v-else>
    <!--没有登录-->
    <el-button type="" @click="userState.login">登录</el-button>
  </span>
  &nbsp;&nbsp;
  
</template>

<script setup lang="ts">
  // 获取状态
  import store from '@/store-nf'

  // 头像网址
  const circleUrl = 'https://p3-passport.byteimg.com/img/user-avatar/8fb85597dfbf036c43cf6ca53fd554ca~100x100.awebp'

  console.log('use组件 被调用了一！')

  // 自读的用户状态
  const { userState } = store
  const { user } = userState
  console.log('use组件 被调用了二！')

  // 不能直接修改，会被拦截
  // user.name = 'ddd'
  console.log('user:', userState)


</script>

<style scoped>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>